<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>引出生命周期</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root" :x="n">
    <h2>当前的n值是：{{n}}</h2>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    const vm = new Vue({
      el: "#root",
      // 替换掉整个root
      // template: `<div><h2>当前的n值是：{{n}}</h2><button @click="add">点我n+1</button></div>`,
      data: {
        n: 1
      },
      methods: {
        add() {
          console.log('add')
          this.n++
        },
        bye() {
          console.log('bye')
          this.$destroy() // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器（自定义事件失效，dom事件还在）。
        }
      },
      watch: {
        n() {
          console.log('n变了')
        }
      },
      beforeCreate() {
        console.log('beforeCreate')
        // console.log(this)
        // debugger;
      },
      created() {
        console.log('created')
        // debugger;
      },
      beforeMount() {
        console.log('beforeMount')
        // debugger;
        // document.querySelector('h2').innerText = '哈哈'
      },
      // Vue完成模板的解析，并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
      mounted() {
        console.log('mounted', this.$el instanceof HTMLElement)
      },
      beforeUpdate() {
        console.log('beforeUpdate')
        console.log(this.n)
        // debugger;
      },
      updated() {
        console.log('updated')
        console.log(this.n)
        this.n = 99
        // debugger;
      },
      beforeDestroy() {
        console.log('beforeDestroy')
        console.log(this.n)
        this.add() // this.n 不变了，此时，对数据的修改不会触发更新了
      },
      destroyed() {
        console.log('destroyed')
      }
    })
    /*
      初始化：生命周期、事件，但数据代理还未开始。
      beforeCreate 此时：无法通过vm访问到data中的数据、methods中的方法。  （beforeCreate指：数据监测、数据代理创建之前）
      初始化：数据监测、数据代理 （注入，响应）
      此时：可以通过vm访问到data中的数据、methods中配置的方法
      此阶段Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。
      此时：1.页面呈现的是未经Vue编译的DOM结构。2.所有对DOM的操作，最终都不奏效。
      将内存中的虚拟DOM转为真实DOM插入页面。
      mounted 此时：1.页面中呈现的是经过Vue编译的DOM。2.对DOM的操作均有效（尽可能避免）。 至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。
      beforeUpdate 此时：数据是新的，但页面是旧的，即：页面尚未和数据保持同步。
      根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新
      updated 此时：数据是新的，页面也是新的，即：页面和数据保持同步。
      beforeDestroy 此时：vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。

      template compilation is performed ahead-of-time if using a build step,e.g. single-file components
      如果使用构建步骤（例如单个文件组件），则提前执行模板编译

      以上一共8个（4对）生命周期
    */ 
  </script>
</body>
</html>